import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import cssModules from 'react-css-modules';
import {Button, List, Row, Icon, Form, Select, Input} from 'antd';
import {PageHeader} from 'ant-design-pro';
import DataTable from './DataTable';
import Toolbar from '../../component/Toolbar';
import CommonModal from '../../component/CommonModal';
import DetailContent from './DetailContent.js';
import UploadPhoto from './UploadPhotos.js';
import moment from 'moment';

import styles from './style.less';

@inject('IdRecordStore', 'OwnerNewUsersStore', 'GlobalStore')
@observer
@cssModules(styles)
class SearchList extends Component {
  constructor(props) {
    super(props);

    this.store = this.props.IdRecordStore;
  }

  async componentWillMount() {
    const {location, match, history} = this.props;

    await this.store.onWillMount(location, match, history);
    await this.props.GlobalStore.setCurrentPage(this);
  }
  reset() {
    const {onWillMount, reset} = this.props.IdRecordStore;
    onWillMount();
    reset();
  }

  render() {
    const {
      tableData,
      loading,
      changeRangePicker,
      changeName,
      changeUserType,
      changeRecordLocation,
      search,

      userType,
      name,
      startTime,
      endTime,
      recordLocation,
    } = this.store;
    // const {newUsers, usersOk, type} = this.props.OwnerNewUsersStore;
    let toolbar = [
      {
        type: 'selectItem',
        pos: 'left',
        width: '14%',
        name: '用户类型',
        children: [
          {name: '全部', value: ''},
          {name: '业主', value: 1},
          {name: '租户', value: 2},
          {name: '家属', value: 3},
          {name: '亲友', value: 4},
          {name: '保洁员', value: 5},
          {name: '物管员', value: 6},
          {name: '维修员', value: 7},
          {name: '保安员', value: 8},
        ],
        labelCol: 10,
        defaultValue: userType ? userType : '',
        wrapperCol: 14,
        handleChange: value => {
          changeUserType(value);
        },
      },
      {
        type: 'inputItem',
        pos: 'left',
        name: '识别位置',
        width: '20%',
        defaultValue: recordLocation ? recordLocation : '',
        labelCol: 8,
        wrapperCol: 16,
        handleChange: e => {
          changeRecordLocation(e.target.value);
        },
      },
      {
        type: 'inputItem',
        pos: 'left',
        name: '姓名',
        width: '18%',
        labelCol: 6,
        defaultValue: name ? name : '',
        wrapperCol: 18,
        handleChange: e => {
          changeName(e.target.value);
        },
      },
      {
        type: 'rangePickerItem',
        pos: 'left',
        name: '时间区间',
        width: '26%',
        labelCol: 6,
        defaultValue:
          startTime && endTime ? [moment(startTime), moment(endTime)] : null,
        wrapperCol: 18,
        handleChange: (date, dateString) => {
          changeRangePicker(dateString);
        },
      },
      {
        type: 'button',
        pos: 'right',
        name: '查询',
        bg: 'green',
        handleClick: () => {
          search();
        },
      },
    ];
    return (
      <div>
        <div styleName={'container'}>
          <Toolbar modules={toolbar} className={styles['toolbar-wrap']} />
          <div>
            <DataTable data={tableData} />
          </div>
          <CommonModal
            title={'业主详情'}
            width={688}
            type={'detail'}
            footer={null}>
            <Row>
              <UploadPhoto />
              <DetailContent />
            </Row>
          </CommonModal>
        </div>
      </div>
    );
  }
}
export default SearchList;
